<template>
  <div>
    <a-drawer
      :title="title"
      :width="520"
      :visible="visible"
      :body-style="{ paddingBottom: '80px' }"
      :footer-style="{ textAlign: 'right' }"
      @close="onClose"
    >
      <a-form :rules="rulesRef" layout="vertical">
        <a-form-item label="状态名称" v-bind="validateInfos.name">
          <a-input v-model:value="modelRef.name" placeHolder="输入状态名称" />
        </a-form-item>

        <a-form-item label="排序" v-bind="validateInfos.sort">
          <a-input
            type="number"
            v-model:value="modelRef.sort"
            placeHolder="输入排序值"
          ></a-input>
        </a-form-item>

        <a-form-item label="阶段描述">
          <a-textarea
            v-model:value="modelRef.desc"
            placeholder="请输入阶段描述"
          ></a-textarea>
        </a-form-item>
      </a-form>

      <div class="drawer-footer">
        <a-space>
          <a-button @click="onClose">取消</a-button>
          <a-button type="primary" @click="onCommit">提交</a-button>
        </a-space>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import { reactive, ref, watch } from "vue";
import { Form, message } from "ant-design-vue";
import request from "../../../../common/utils/request";
const useForm = Form.useForm;

export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    editItem: {
      type: Object,
      default: () => ({ id: 0 }),
    },
  },

  setup(props, context) {
    const modelRef = reactive({});
    const initModelRef = () => {
      modelRef.name = "";
      modelRef.sort = "";
      modelRef.desc = "";
      modelRef.id = 0;
    };

    const title = ref("新增状态");
    watch(
      () => props.visible,
      (val) => {
        if (val == true) {
          initModelRef();
          if (props.editItem.id == 0) {
            title.value = "新增状态";
          } else {
            modelRef.id = props.editItem.id;
            modelRef.name = props.editItem.name;
            modelRef.sort = props.editItem.sort;
            modelRef.desc = props.editItem.desc;
            title.value = "编辑状态";
          }
        }
      },
      { immediate: true }
    );

    const rulesRef = reactive({
      name: [
        {
          required: true,
          message: "请输入状态名称",
        },
      ],
      sort: [
        {
          required: true,
          message: "请输入排序值",
        },
      ],
      desc: [
        {
          required: false,
          message: "",
        },
      ],
    });
    const { resetFields, validate, validateInfos } = useForm(
      modelRef,
      rulesRef
    );

    const onClose = () => {
      context.emit("close");
    };
    const onCommit = () => {
      validate().then(() => {
        const param = { ...modelRef };
        if (props.editItem.id != 0) {
          request
            .put("/org", "/business/clueStatus/editClueStatus", param)
            .then((res) => {
              message.success(res.msg || "编辑成功");
              context.emit("refresh");
            });
        } else {
          delete param.id;
          request
            .post("/org", "/business/clueStatus/addClueStatus", param)
            .then((res) => {
              message.success(res.msg || "添加成功");
              context.emit("refresh");
            });
        }
      });
    };

    return {
      title,
      onClose,
      onCommit,
      modelRef,
      rulesRef,
      resetFields,
      validate,
      validateInfos,
    };
  },
};
</script>

<style lang="less" scoped></style>
